<template>
  <div id="main" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import {SumCharge} from "@/api/system/charge";


export default {
  name: "echarts",
  dicts: [`community_rooms_purpose`],
  data(){
    return {
      myChart: ''
    }
  },
  created() {
    this.initData()
  },
  mounted() {
    this.handelEcharts()

  },
  methods:{
    handelEcharts(){
      let chartDom = document.getElementById('main');
      this.myChart = echarts.init(chartDom);
      this.myChart.setOption({
        title: {
          text: '12个月水电费物业费累计'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '水费',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '电费',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '物业费',
            type: 'line',
            stack: 'Total',
            data: []
          }

        ]
      })
    },

    async initData(){
      SumCharge().then(res => {
        let dataList = []
        console.log(res)
        this.dataList = res.data
        this.monthList = res.data.map(item=> item.month)
        this.waterList = res.data.map(item=> item.waterPay)
        this.electricList = res.data.map(item=> item.electricPay)
        this.propertyList = res.data.map(item=> item.propertyPay)
        this.myChart.setOption({
          legend: {
            data: res.label,
          },
          xAxis: {
            data: this.monthList
          },
          series: [
            {
            data: this.waterList
            },
            {
              data: this.electricList
            },
            {
              data: this.propertyList
            }
          ]
        })
      })
    }
  }
}
</script>
